<template>
  <!-- 主页面 -->
  <div id="Home">
    <div class="home-main">
      <!-- 左侧导航栏页面 -->
      <div class="main-left">
        <!-- 标题 -->
        <div class="nameBox">
          <span>让风吹去阴影聊天室</span>
        </div>
        <!-- 用户信息 -->
        <div class="userBox">
          <div class="profile">
            <svg-icon icon-name="icon-Mewode"></svg-icon>
          </div>
          <span class="username">{{ userName }}</span>
        </div>
        <!-- 路由按钮 -->
        <router-link
          class="nav"
          v-for="item in meauList"
          :key="item.id"
          :to="item.to"
          :class="[routerClass, { checked: item.to === currentRoute.path }]"
          :style="navStyle(item)"
          @click="handleClick(item.to)"
        >
          <svg-icon
            :icon-name="item.iconClass"
            :class-name="item.class"
            :color="item.to === currentRoute.path ? '#409eff' : '#000000'"
          ></svg-icon>
          <div class="shape"></div>
          <span>{{item.value}}</span>
        </router-link>
      </div>
      <!-- 右侧子路由页面 -->
      <div class="main-right">
        <!-- 二级路由入口 -->
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script setup>
import {ref, onMounted, computed} from 'vue';
import { useRouter, useRoute } from 'vue-router';
// 引入SvgIcon组件
import SvgIcon from '@/components/SvgIcon/SvgIcon.vue';
// 路由数据
const meauList = [
  {
    id: 1,
    class: 'message',
    iconClass: 'icon-xiaoxi2',
    value: '消息',
    to: '/message',
  },
  {
    id: 2,
    class: 'phonebook',
    iconClass: 'icon-tongxunlu',
    value: '通讯录',
    to: '/phonebook',
  },
  {
    id: 3,
    class: 'setting',
    iconClass: 'icon-shezhi',
    value: '设置',
    to: '/setting',
  }
];

// 获取当前路由对象
const router = useRouter();
const currentRoute = useRoute();
onMounted(() => {
  if (currentRoute.path === '/home' && currentRoute.query.redirect !== '/message') {
    router.push('/message');
  }
});

// 更改路由样式
function navStyle(item) {
  return {
    color: item.to === currentRoute.path ? '#0874ea' : '#000000'
  };
}

// 点击切换路由页面
function handleClick(to) {
  router.push(to);
}
</script>

<style lang="less" scoped>
// 引入样式
@import "./Home.less";
</style>
